<template>
	<view class="content">
		<view class="user">
			<image class="tx" :src="'https://www.sdxiecheng.cn/'+userInfo.avatar" mode="aspectFill"></image>
			<view class="user-info">
				<view class="name">{{ userInfo.nickname}}</view>
				<view class="phone">账号：{{ userInfo.mobile}}</view>
				<!-- <button @click="openAMap">打开高德地图</button> -->
			</view>
		</view>
		<view class="order-info">
			<view class="order-title">
				单数统计
			</view>
			<view class="order-type-list" v-if="orderData">
				<view class="order-type-li" @click="jump('/pages/order/order?type=today')">
					<view class="order-type-li-title">今日订单数</view>
					<view class="order-type-li-num">
						<text>
							线上订单
						</text>
						{{ orderData.todaynumon}}
					</view>

					<view class="order-type-li-num">
						<text>
							线下订单
						</text>
						{{ orderData.todaynum}}
					</view>

				</view>
				<view class="order-type-li" @click="jump('/pages/order/order?type=yesterday')"
					style="background-color: #B4C22D;">
					<view class="order-type-li-title">昨日订单数</view>

					<view class="order-type-li-num">
						<text>
							线上订单
						</text>
						{{ orderData.yestadaynumon}}
					</view>
					<view class="order-type-li-num">
						<text>
							线下订单
						</text>
						{{ orderData.yestadaynum}}
					</view>
				</view>
				<view class="order-type-li" @click="jump('/pages/order/order?type=year')"
					style="background-color: #5F87DF;">
					<view class="order-type-li-title">今年订单数</view>
					<view class="order-type-li-num">
						<text>
							线上订单
						</text>
						{{ orderData.yearnumon}}
					</view>
					<view class="order-type-li-num">
						<text>
							线下订单
						</text>
						{{ orderData.yearnum}}
					</view>
				</view>
				<view class="order-type-li" @click="jump('/pages/order/order?type=month')"
					style="background-color: #FF7C13;">
					<view class="order-type-li-title">本月订单数</view>
					<view class="order-type-li-num">
						<text>
							线上订单
						</text>
						{{ orderData.monthnumon}}
					</view>
					<view class="order-type-li-num">
						<text>
							线下订单
						</text>
						{{ orderData.monthnum}}
					</view>
				</view>
				<view class="order-type-li" @click="jump('/pages/order/order?type=lastmonth')"
					style="background-color: #FBAA27;">
					<view class="order-type-li-title">上月订单数</view>

					<view class="order-type-li-num">
						<text>
							线上订单
						</text>
						{{ orderData.yesmonthnumon}}
					</view>
					<view class="order-type-li-num">
						<text>
							线下订单
						</text>
						{{ orderData.yesmonthnum}}
					</view>
				</view>
				<view class="order-type-li" @click="jump('/pages/order/order?type=total')"
					style="background-color: #5ABAFF;">
					<view class="order-type-li-title">总订单数</view>

					<view class="order-type-li-num">
						<text>
							线上订单
						</text>
						{{ orderData.totalnumon}}
					</view>
					<view class="order-type-li-num">
						<text>
							线下订单
						</text>
						{{ orderData.totalnum}}
					</view>
				</view>
			</view>
		</view>
		<button class="u-reset-button btn1" style="background: #B4C22D;" @click="scanCode">扫码取鞋</button>
		<button class="u-reset-button btn1" @click="outLogin" style="margin-top: 30rpx;">退出登录</button>
	</view>
	<!-- <u-tabbar :list="tabbar" :before-switch="beforeSwitch" :mid-button="true" :border-top="false"  mid-button-size="110" active-color="#FF9A33" inactive-color="#999999"></u-tabbar> -->
	</view>
</template>

<script>
	export default {

		data() {
			return {
				tabbar: [],
				orderData: false,
				userInfo: false
			}
		},
		onLoad() {
			this.tabbar = this.$store.state.tabbar
		},
		onShow() {
			this.getOrderTot()
			this.getUserInfo()
		},
		methods: {
			openAMap() {
				uni.navigateToMiniProgram({
					appId: 'wx08a2b7b2f79aa6d1', // 高德地图小程序的AppId
					path: 'pages/index/index', // 高德地图小程序的首页路径，根据实际情况设置
					extraData: {
						// 需要传递给高德地图小程序的参数，根据实际情况设置
						// 例如：
						// key: value
					},
					success: () => {
						console.log('成功打开高德地图')
					},
					fail: (err) => {
						console.error('打开高德地图失败', err)
					}
				})
			},
			outLogin() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要退出登录吗',
					success: function(res) {
						if (res.confirm) {
							uni.clearStorageSync()
							console.log(uni.getStorageSync('token'))
							uni.showToast({
								icon: 'success',
								title: '退出成功'
							})
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/login/login'
								})
							}, 800)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 扫描条形码
			scanCode() {
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log(res)
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result.split('-'));
						let type_on = res.result.split('-')[0]
						console.log(type_on + '类型')
						let id = res.result.split('-')[1]

						that.barCode = res.result
						if (type_on == 'xc') {
							uni.navigateTo({
								url: '/pages/order/details/details?id=' + id
							})
						} else {
							uni.navigateTo({
								url: '/pages/order/details/on_details?id=' + id 
							})

						}
					}
				});

			},
			beforeSwitch(index) {
				console.log(index)
				if (index != 2) {
					return true
				} else {
					uni.scanCode({
						success: function(res) {
							console.log('条码类型：' + res.scanType);
							console.log('条码内容：' + res.result);
						}
					});
					return false
				}
			},
			//跳转链接
			jump(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			// 获取订单总数
			getOrderTot() {
				uni.$u.http.post('/delivery/order_statistics').then(res => {
					console.log(res.data)
					this.orderData = res.data
				})
			},
			// 获取用户信息
			getUserInfo() {
				uni.$u.http.post('/user/puserinfo').then(res => {
					console.log(res.data)
					this.userInfo = res.data
				}).catch(err => {
					console.log(err.data)
					uni.showModal({
						title: '温馨提示',
						showCancel: false,
						content: err.data.msg,
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../login/login'
								})
								// console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				})
			}
		}
	}
</script>

<style lang="less">
	.btn1 {
		width: 650rpx;
		height: 80rpx;
		background: #FBAA27;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 80rpx;
		margin-top: 100rpx;
	}

	.content {
		height: 100%;
		// min-height: 100vh;
		position: relative;
		background-image: linear-gradient(0deg, #F9F9F9, #FBAA27);
		background-size: 100% 210rpx;
		background-repeat: no-repeat;
		padding-bottom: 20rpx;
		background-color: #F9F9F9;
		padding: 0 20rpx;
	}

	.user {
		display: flex;
		padding-top: 43rpx;
		padding-left: 13rpx;

		.tx {
			width: 115rpx;
			height: 115rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 31rpx;
			background: #FFFFFF;
		}

		.user-info {
			margin-top: 15rpx;

			.name {
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.phone {
				color: #FFFFFF;
				font-size: 24rpx;
				font-weight: 500;
				margin-top: 4rpx;
			}
		}
	}

	.order-info {
		width: 100%;
		min-height: calc(100vh - 230rpx);
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 45rpx;
		overflow: hidden;

		.order-title {
			font-size: 30rpx;
			font-weight: bold;
			padding-left: 21rpx;
			padding-top: 25rpx;
			padding-bottom: 40rpx;
			display: flex;
			align-items: center;
			position: relative;

			&::after {
				content: "";
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				left: -10rpx;
				border-radius: 50%;
				background: rgba(251, 170, 39, 1);
			}
		}

		.order-type-list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 20rpx;

			.order-type-li {
				width: 48%;
				// height: 180rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				background: url(http://shoe-orange.laiwang.work/img/order-icon.png) right bottom;
				background-color: #FBAA27;
				background-repeat: no-repeat;
				background-size: 100rpx auto;
				margin-bottom: 20rpx;
				padding: 20rpx;

				.order-type-li-title {
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 1;
					margin-bottom: 20rpx;
				}

				.order-type-li-num {
					font-size: 46rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 1;

				}

				&:nth-child(2n) {
					margin-right: 0;
				}
			}
		}
	}

	.order-type-li-num text {
		font-size: 25rpx;
		display: inline-block;
		margin-right: 10rpx;
	}

	.order-type-li-num {
		display: flex;
		align-items: center;
		font-size: 46rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 60rpx !important;
	}

	.order-type-li-title {
		margin-bottom: 35rpx !important;
	}
</style>